<template>
  <div>
    <Topnav toggleMenuButtonVisible />
    <div class="content">
      <aside v-if="asideVisible">
        <h2>文档</h2>
        <ul>
          <li>
            <router-link to="/doc/intro">介绍</router-link>
          </li>
          <li>
            <router-link to="/doc/install">安装</router-link>
          </li>
          <li>
            <router-link to="/doc/get-started">开始使用</router-link>
          </li>
        </ul>
        <h2>组件列表</h2>
        <ul>
          <li>
            <router-link to="/doc/switch">Switch</router-link>
          </li>
          <li>
            <router-link to="/doc/button">Button</router-link>
          </li>
          <li>
            <router-link to="/doc/dialog">Dialog</router-link>
          </li>
          <li>
            <router-link to="/doc/tab">Tab</router-link>
          </li>
        </ul>
      </aside>
      <div class="placehold"></div>
      <main @click="asideClose">
        <router-view />
      </main>
    </div>
  </div>
</template>
<script lang="ts">
import Topnav from "../components/Topnav.vue";
import { inject, Ref } from "vue";
export default {
  components: { Topnav },
  setup() {
    const asideVisible = inject<Ref<boolean>>("asideVisible");
    const width = document.documentElement.clientWidth;
    // console.log(asideVisible.value);
    // return { asideVisible };
    const asideClose = () => {
      console.log(width);

      if (width < 500) {
        asideVisible.value = false;
      }
    };
    return { asideVisible, asideClose };
  },
};
</script>

<style lang="scss" scoped>
aside {
  background: #f5f5f5;
  width: 200px;
  cursor: pointer;
  position: fixed;
  bottom: 0;
  top: 3.2rem;
  z-index: 2000;
  h2 {
    padding: 4px 16px;
  }

  li {
    a {
      color: #000;
      display: block;
      padding: 4px 16px;
    }
    .router-link-active {
      background: #ffffff;
      border-right: 3px solid;
    }
  }
  div {
    margin-bottom: 1rem;
  }
}
.placehold {
  width: 100%;
  height: 61px;
}
main {
  border: 1px solid #f5f5f5;
  width: 85vw;
  padding: 2rem 1rem;
  background: #f5f5f5;
  border-radius: 5px;
  margin-bottom: 6rem;
  margin-left: 210px;
}
@media screen and (max-width: 500px) {
  main {
    width: 92vw;
    margin: 0 auto;
  }
}
</style>